<template>
  <div>
    <h1>接口管理</h1>
    <button @click="saveInterface">保存接口</button>
    <button @click="getInterface">获取接口</button>
    <button @click="updateInterface">更新接口</button>
    <button @click="deleteInterface">删除接口</button>

    <p v-if="interfaceData">
      ID: {{ interfaceData.id }}<br>
      Name: {{ interfaceData.name }}<br>
      Description: {{ interfaceData.description }}
    </p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      interfaceData: null,
      newInterface: {
        name: 'Example Interface',
        description: 'This is an example interface.'
      },
      interfaceId: 1
    };
  },
  methods: {
    async saveInterface() {
      try {
        const response = await axios.post('/interfaces/save', this.newInterface);
        console.log('保存成功:', response.data);
      } catch (error) {
        console.error('保存失败:', error);
      }
    },
    async getInterface() {
      try {
        const response = await axios.get(`/interfaces/${this.interfaceId}`);
        this.interfaceData = response.data.data;
        console.log('获取成功:', this.interfaceData);
      } catch (error) {
        console.error('获取失败:', error);
      }
    },
    async updateInterface() {
      try {
        const response = await axios.put('/interfaces/update', this.newInterface);
        console.log('更新成功:', response.data);
      } catch (error) {
        console.error('更新失败:', error);
      }
    },
    async deleteInterface() {
      try {
        const response = await axios.delete(`/interfaces/${this.interfaceId}`);
        console.log('删除成功:', response.data);
      } catch (error) {
        console.error('删除失败:', error);
      }
    }
  }
};
</script>